<template>
    <div ref="jexcel" @drop="drop" @dragover="allowDrop" style="" class="jexcel">
    </div>
</template>
<script>
    var component = {
        props:["data", "i"],
        data(){
           return {
               id: "jexcel_" + Math.random()
           }
        },
        mounted(){
            var options = {
                contextMenu: true,
                mergeCells: this.data.merge || [],
                rowHeaders: true,
                colHeaders: true,
                // autoColumnSize: true,
                // autoRowSize: true,
                manualRowResize: true,
                manualColumnResize:true,
                ManualColumnMove:true,
                ManualRowMove:true,
                // width: 500,
                height: 280,
                colWidths: 120,
                language:"zh-CN",
                licenseKey: 'non-commercial-and-evaluation'
            };
            this.data.data && this.data.data.length && (options.data =  this.data.data)//[],
            var hot = new Handsontable(this.$refs.jexcel, options);
            this.data.meta && this.data.meta.forEach(function (e) {
                hot.setCellMetaObject(e.row, e.col, e);
            });
            hot.render()
            Object.assign(this, {hot})
        },
        methods:{
            drop(e){
                if(e.target.tagName == 'TD'){
                    var ci = $(e.target).index() - 1;
                    var ri = $(e.target).parent().index();
                    if(ci >= 0){
                        var data = e.dataTransfer.getData("Text");
                        if(e.dataTransfer.getData("isFunc") == 1){

                        } else {
                            this.hot.setDataAtCell(ri,ci,'[' + data + ']');
                        }
                        e.preventDefault();
                    }
                }
                // console.log("drop",e)
            },
            allowDrop(e){
                e.preventDefault();
            } ,
            saveData(){
                this.data.data = this.getData();
                this.data.merge = this.getMerged();
                this.data.meta = this.getMeta();
            },
            getData(){
                return this.hot.getData()
            },
            getMeta(){
                var items = this.hot.getCellsMeta();
                items.forEach(e => delete e.instance);
                return items;
            },
            getMerged(){
                var rc = 0;
                var cells = [];
                $(this.$refs.jexcel).find("tbody tr").each(function () {
                    var row = $(this);
                    var cc = 0;
                    row.find("td").each(function () {
                        var col = $(this);
                        if(col.attr("rowspan") || col.attr("colspan")){
                            cells.push({
                                row: rc,
                                col: cc,
                                rowspan: Number(col.attr("rowspan")),
                                colspan: Number(col.attr("colspan"))
                            })
                        }
                        cc++;
                    });
                    rc++;
                });
                return cells;
            },
        }
    };
</script>